<template>
    <div>
        <Modal v-model="modal" class="modal-full" title="模型编辑" width="90%">
            <Row type="flex" v-if="modalShow">
                <Col ref="codeBox"  :span="8" class="code-box">
                    <div v-if="false">
                       <FormControl :module="actionModel.code+'_main'" ref="mainForm" :data="mainData" :model="mainModel" :col="2" controlSize="small"></FormControl>
                    </div>
                    <CodeEditor v-model="sourceData" lang="json"></CodeEditor>
                    <Button  @click="sourceData=''" type="error" class="btn-tool btn-clear" icon="android-delete"></Button>
                    <Button  @click="reloadView" type="info" class="btn-tool btn-update" icon="arrow-swap"></Button>
                    <Button  @click="codeToTop" type="success" class="btn-tool btn-to-top" icon="arrow-up-a"></Button>
                </Col>
                <Col :span="16" class="view-box">
                    <div v-if="parseError && (sourceData && sourceData.length)" class="red text-center">模型解析错误 请检查数据格式<hr/></div>
                    <GridPanel v-if="parseModel && isParse" :model="parseModel" :hasCheck="true"></GridPanel>
                    <div v-else class="text-center text-empty">模型预览</div>
                </Col>
            </Row>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="actionSubmit" type="primary">确认</i-button>
            </div>
        </Modal>
    </div>
</template> 

<script>
import ModalBase from "../modalBase";
import CodeEditor from "@/element/codeEditor";
import GridPanel from "@/node/gridPanel/index";
import FormControl from "@/components/formTable";
import { billParser } from "@/common/parser";

import $ from "@/common";

export default {
  extends: ModalBase,
  props: {},
  data() {
    return {
      path: {
        find: "/service/{app}/bill/model/{code}",
        save: "/service/{app}/bill/model",
        model: "/service/{app}/bill/model/{code}",
        submit: "/service/{app}/bill/model"
      },
      isParse: false,
      parseError: false,
      sourceData: "",
      counter: 0,
      tempModel: null,
      mainData: {},
      mainModel: {
        code: "bill",
        fields: [
          {
            name: "编码",
            code: "code",
            type: "code"
          },
          {
            name: "名称",
            code: "name",
            type: "code"
          },
          {
            name: "备注",
            code: "memo",
            type: "memo"
          }
        ]
      }
    };
  },
  computed: {
    parseModel() {
      var model = {};
      try {
        model = JSON.parse(this.sourceData);
        if (model.data && $.isArray(model.data) && !model.code) {
          model = model.data[0];
        }
        this.$set(this, "tempModel", billParser(model));
        this.parseError = false;
        this.reloadView();
      } catch (ex) {
        this.parseError = true;
      }
      return this.tempModel;
    }
  },
  created() {
    this.counter = 0;
  },
  methods: {
    load() {
      this.isParse = false;
      this.sourceData = "";
      this.selectedRow = this.$owner.getSelectedDataRow();
      if (this.selectedRow) {
        $.link(this.path.model, null, {
          param: this.selectedRow
        }).then(res => {
          this.sourceData = JSON.stringify(res.data, null, 2);
        });
      }
    },
    reloadView() {
      this.isParse = false;
      this.$nextTick(() => {
        this.isParse = true;
      });
    },
    codeToTop() {
      this.$refs.codeBox.$el.querySelector(".CodeMirror-scroll").scrollTop = 0;
    },
    actionSubmit() {
      var data;
      try {
        data = JSON.parse(this.sourceData);
      } catch (ex) {
        this.$Notice.error({
          title: "JSON格式错误请检查"
        });
        console.warn(ex);
        return;
      }
      $.link(this.path.submit, data, {
        method: "put"
      }).then(() => {
        this.$parent.actionSuccess("保存成功");
        this.close();
      });
    }
  },
  components: {
    CodeEditor,
    GridPanel,
    FormControl
  }
};
</script>

<style lang="less">
.code-box {
  display: flex;
  flex-direction: column;
  .CodeMirror {
    flex: 1;
    border-right: 1px solid #dddee1;
    margin-right: 2px;
    .CodeMirror-scroll {
      /*height: auto;*/
      overflow-x: hidden !important;
    }
  }
  .field-control {
    margin-bottom: 0;
  }
  .btn-tool {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 5;

    right: 28px;
    border-radius: 30px;
    padding: 0;
  }
  .btn-update {
    top: 8px;
  }
  .btn-clear {
    top: 48px;
  }
  .btn-to-top {
    bottom: 8px;
  }
}
.view-box {
  padding: 0 8px;
  overflow: auto;
  .node-panel {
    height: auto;
  }
  .text-empty {
    margin: 32px;
    text-align: center;
    color: #888;
  }
}
</style>
